<template>
  <div class="main-box">
    <el-row :gutter="10">
      <el-col :span="8" class="fixed-height">
        <div class="box">
          <el-descriptions title="项目概览" :column="1" border>
            <el-descriptions-item label="名称">{{ project.name }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <dict-tag :options="dict.type.project_status" :value="project.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ project.startDate }}</el-descriptions-item>
            <el-descriptions-item label="结束时间">{{ project.endDate }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{ project.createdName }}</el-descriptions-item>
            <el-descriptions-item label="项目进度">
              <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>

      <el-col :span="16" class="fixed-height">
        <div class="box">
          <div id="taskChart" class="chart"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top: 10px;">
      <el-col :span="12" class="fixed-height">
        <div class="box">
          <div>描述</div>
          <div class="text">
            <div v-html="project.description"></div>
          </div>

        </div>
      </el-col>

      <el-col :span="12" class="fixed-height">
        <div class="box">
          <div>项目通知</div>
          <el-table :data="notificationList" border>
            <el-table-column prop="title" label="通知标题" width="300"/>
            <el-table-column prop="type" label="通知类型" width="120"/>
            <el-table-column prop="createdAt" label="创建时间" width="180"/>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {listAllTask} from "@/api/project/task";
import {listAllNotification} from "@/api/project/notification";
import * as echarts from "echarts";

export default {
  name: "Overview",
  dicts: ['project_status', 'task_type', 'task_status'],
  data() {
    return {
      notificationList: [],
      tasks: [],
    };
  },
  props: {
    project: {
      type: Object,
      required: true,
    },
  },
  created() {
    this.getTaskSummary();
    this.getNotificationList();
  },
  comments:{
    progress(){
      if(this.tasks.length===0)return 0
      return this.tasks.length/ this.tasks.filter(task => task.status === 'over').length;
    }
  },
  methods: {
    getTaskSummary() {
      listAllTask({projectId: this.project.id}).then(res => {
        this.tasks = res.data;
        this.initEchartsWorkItem();
      });
    },
    async getNotificationList() {
      const res = await listAllNotification({projectId: this.project.id});
      this.notificationList = res.data || [];
    },
    initEchartsWorkItem() {
      const allTaskTypes = Array.from(new Set(this.tasks.map(item => item.type)));
      const validTaskTypes = allTaskTypes.filter(type => this.tasks.some(task => task.type === type));
      const worksData = this.dict.type.task_status.map(status => {
        const data = validTaskTypes.map(type =>
          this.tasks.filter(task => task.type === type && task.status === status.value).length
        );
        return {
          name: status.label,
          type: 'bar',
          stack: 'total',
          label: {show: true, formatter: ({value}) => value > 0 ? value : ''},
          emphasis: {focus: 'series'},
          data
        };
      });
      const option = {
        tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
        legend: {},
        grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
        yAxis: {type: 'value'},
        xAxis: {
          type: 'category',
          data: validTaskTypes.map(type => (this.dict.type.task_type.find(item => item.value === type) || {label: type}).label)
        },
        series: worksData
      };
      echarts.init(document.getElementById('taskChart')).setOption(option);
    }
  }
};
</script>

<style scoped>
.fixed-height {
  height: 400px; /* 你可以调整这个高度 */
}

.box {
  border: 1px solid #ddd;
  padding: 10px;
  height: 100%;
}

.main-box {
  margin: 20px
}

.chart {
  width: 100%;
  height: 358px;
}

.text {
  padding: 15px;
}
</style>
